<template>
    <div>
        <!-- 将来谁使用轮播图组件，谁为我们传递lunbotuList
            此时，lunbotuList应该是父组件向子组件传值来设置
         -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
                <img :src="item.img_url" :class="{'full':isfull}">
            </mt-swipe-item>
        </mt-swipe>

        <!-- 
            分析：商品评论中的轮播图如何优化？
            1、首页中的图片，宽和高都是用了100%；
            2、在商品详情页面中，轮播图的图片如果也是用宽高为100%，页面比较丑；
            3、我们期望在商品详情页面中，轮播图的高度100%，宽度为自适应
            4、所以问题出现在：首页中的轮播图和详情中的轮播图分歧点是：宽度该如何设置？
            5、解决方案：首页和商品详情中的轮播图其他都一样，只是宽度有冲突点，所以我门应该设置了一属性，来控制是否来显示100% :isfull
         -->
    </div>
</template>

<script>
export default {
    props:['lunbotuList','isfull']
}
</script>

<style lang="scss" scoped>
        .mint-swipe{
        height: 200px;

        .mint-swipe-item{
            text-align: center;
        }
        img{
            height: 100%;
        }
        .full{
            width: 100%;
        }
    }
</style>